<template>
    <div class="body-layout">
        <div class="honor-layout">
            <div class="honor-layout-select">
                <el-select v-model="queryParams.teamHonorFlag" placeholder="请选获奖对象" clearable style="margin-right: 19px;" @change="getList">
                    <el-option
                    v-for="dict in teamHonorOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"/>
                </el-select>
                <el-select v-model="queryParams.year" placeholder="请选择年份" clearable @change="getList">
                    <el-option
                    v-for="dict in yearOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"/>
                </el-select>
            </div>
            <div class="honor-layout-cont"></div>
            <div class="title-content">
                <div class="title-head">
                    <img src="../../../../assets/images/org_honor.png" style="width: 120px;">
                    <el-button @click="handleAllView(true)" v-if="orgHonorAllList.length>0">查看全部</el-button>
                </div>
                <el-carousel height="210px" :autoplay="false">
                    <el-carousel-item v-for="(item, index) in orgHonorAllList" :key="item">
                        <div class="item-layout" v-for="(elem, elemIndex) in item.honorList" :key="elem">
                            <div style="text-align: center;">
                                <div class="item-image-div">
                                    <el-image style="width: 180px; height: 120px;" :src="baseUrl+elem.pictureUrl"></el-image>
                                </div>
                                <span class="item-honor-name">{{ elem.deptName }}</span>
                                <span class="item-honor-group">{{ selectDictLabel(pb_org_reward, elem.typeOrg) }}</span>
                                <span class="item-honor-time">{{ elem.grantTime }}</span>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
                <div class="title-head">
                    <img src="../../../../assets/images/single_honor.png" style="width: 120px;">
                    <el-button @click="handleAllView(false)" v-if="singleHonorAllList.length>0">查看全部</el-button>
                </div>
                <el-carousel height="210px" :autoplay="false">
                    <el-carousel-item v-for="(item, index) in singleHonorAllList" :key="item">
                        <div class="item-layout" v-for="(elem, elemIndex) in item.honorList" :key="elem">
                            <div style="text-align: center;">
                                <div class="item-image-div">
                                    <el-image style="width: 180px; height: 120px;" :src="baseUrl+elem.pictureUrl"></el-image>
                                </div>
                                <span class="item-honor-name">{{ elem.userName }}</span>
                                <span class="item-honor-group">{{ selectDictLabel(pb_member_reward, elem.typePerson) }}</span>
                                <span class="item-honor-time">{{ elem.grantTime }}</span>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>

    <!-- 选择全部荣誉对话框 -->
    <div class="ant-modal-mask" v-if="openHonor"></div>
    <div class="ant-modal" v-if="openHonor">
        <div class="ant-modal-content" :class="isOrgHonorBool ? 'org-dialog-layout' : 'people-dialog-layout'">
            <div class="btn_group">
                <el-button @click="cancelHonor">关 闭</el-button>
            </div>
            <div class="viewAllWrap">
                <div class="viewContent">
                    <div class="viewItem" v-for="(elem, index) in allHonorList" :key="elem">
                        <div class="viewInnerItem">
                            <div class="leftDiv">
                                <el-image style="width: 180px; height: 120px;" :src="baseUrl+elem.pictureUrl"></el-image>
                            </div>
                            <div class="rightDiv">
                                <div>{{ elem.deptName }}</div>
                                <div v-if="!isOrgHonorBool">{{ elem.userName }}</div>
                                <div v-if="isOrgHonorBool">{{ selectDictLabel(pb_org_reward, elem.typeOrg) }}</div>
                                <div v-else>{{ selectDictLabel(pb_member_reward, elem.typePerson) }}</div>
                                <div>{{ elem.grantTime }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <pagination
                v-show="total>0"
                :total="total"
                v-model:page="queryHonorParams.pageNum"
                v-model:limit="queryHonorParams.pageSize"
                @pagination="getAllHonorList"
            />
        </div>
    </div>
</template>
  
<script setup>
import { listHonor } from "@/api/partybuilding/Honor";
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const { proxy } = getCurrentInstance();
const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 99,
        teamHonor: null,
        year: null,
        reward: 1
    },
    queryHonorParams: {
        pageNum: 1,
        pageSize: 9,
        teamHonor: undefined
    }
});
const queryParams = toRef(data, 'queryParams');
const queryHonorParams = toRef(data, 'queryHonorParams');
const { pb_org_reward } = proxy.useDict("pb_org_reward");
const { pb_member_reward } = proxy.useDict("pb_member_reward");

const honorList = ref([]);
const allHonorList = ref([]);
const loading = ref(true);
const total = ref(0);
const orgHonorAllList = ref([]);
const singleHonorAllList = ref([]);
const yearOptions = ref([]);
const isOrgHonorBool = ref(true);
const openHonor = ref(false);
const teamHonorOptions = ref([{value: null, label: '请选获奖对象'},{value: 1, label: '组织荣誉'},{value: 2, label: '个人荣誉'}]);

const refresh = () => {
    getList();
};

defineExpose({
    refresh
});

function getYearOptions() {
    const now = new Date();
    const curYear = now.getFullYear();
    yearOptions.value = [];
    yearOptions.value.push({ value: null, label: "请选择年份" });
    for (let i = curYear; i > curYear - 5; i--) {
        yearOptions.value.push({ value: i, label: i + "年" });
    }
}
/** 查询荣誉管理列表 */
function getList() {
    loading.value = true;
    if (queryParams.value.teamHonorFlag == '1') {
        //组织荣誉
        queryParams.value.teamHonor = 1;
    } else if (queryParams.value.teamHonorFlag == '2') {
        //个人荣誉
        queryParams.value.teamHonor = 0;
    } else {
        queryParams.value.teamHonor = null;
    }
    queryParams.value.reward = 1;
    listHonor(queryParams.value).then(response => {
        honorList.value = response.rows;
        let orgHonorListArr = [];
        let singleHonorListArr = [];
        //组织奖励
        honorList.value.forEach((item, index) => {
            if (item.teamHonor==1){
                orgHonorListArr.push(item);
            }else{
                singleHonorListArr.push(item);
            }
        });
        orgHonorAllList.value = calcHonorList(orgHonorListArr);
        singleHonorAllList.value = calcHonorList(singleHonorListArr);
        loading.value = false;
    });
}

function calcHonorList(orgHonorListArr) {
    let orgHonorAllListArr = [];
    let orgHonorListArr0 = [];
    let orgHonorListArr1 = [];
    orgHonorListArr.forEach((item, index) => {
        let pageNum = index % 4;
        if (index>0 && pageNum == 0) {
            orgHonorListArr1.push({
                honorList : orgHonorListArr0
            });
            orgHonorListArr0 = [];
        }
        orgHonorListArr0.push(item); 
    });
    if (orgHonorListArr1.length>0) {
        orgHonorAllListArr.push(...orgHonorListArr1); 
    }
    if (orgHonorListArr0.length>0) {
        orgHonorAllListArr.push({honorList: orgHonorListArr0}); 
    }
    return orgHonorAllListArr;
}

function handleAllView(isOrg) {
    isOrgHonorBool.value = isOrg;
    getAllHonorList();
}
function cancelHonor() {
    openHonor.value = false;
}
function getAllHonorList() {
    if (isOrgHonorBool.value) {
        queryHonorParams.value.teamHonor = 1;
    } else {
        queryHonorParams.value.teamHonor = 0;
    }
    queryHonorParams.value.reward = 1;
    listHonor(queryHonorParams.value).then(response => {
        openHonor.value = true;
        allHonorList.value = response.rows;
        total.value = response.total;
    });
}

getYearOptions();
getList();
</script>
  
<style lang="scss" scoped>
.ant-modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1999;
    height: 100%;
    background-color: rgba(0, 0, 0, .45);
    filter: alpha(opacity = 50);
}
.ant-modal {
    position: fixed;
    top: 3%;
    left: 5%;
    z-index: 1999;
    outline: 0;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    width: 90%;
    color: rgba(0, 0, 0, .65);
}
.ant-modal-content {
    position: relative;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-radius: 4px;
    min-height: 840px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    pointer-events: auto;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: rgb(25, 24, 51);
}
.org-dialog-layout{
    background-image: url(../../../../assets/images/rewards_bg_org.png);
}
.people-dialog-layout{
    background-image: url(../../../../assets/images/rewards_bg_single.png);
}

.btn_group {
    position: absolute;
    top: 32px;
    right: 32px;
    z-index: 1999;
}
.viewAllWrap {
    position: relative;
    height: 800px;
    padding: 215px 105px 0;
}
.viewAllWrap .viewContent {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: row;
    flex-direction: row;
}
.viewAllWrap .viewContent .viewItem {
    -ms-flex: 0 0 33.33%;
    flex: 0 0 33.33%;
    padding: 16px 0;
}
.viewAllWrap .viewContent .viewItem .viewInnerItem {
    display: flex;
    float: left;
}
.viewAllWrap .viewContent .viewItem .viewInnerItem .leftDiv {
    border: 3px solid transparent;
    width: 186px;
    height: 126px;
    border-image: linear-gradient(90deg, #ffdf00, #ff6a00) 1 10;
    box-shadow: 2px 2px 10px #bcb4a4;
}
.viewAllWrap .viewContent .viewItem .viewInnerItem .rightDiv {
    padding-left: 10px;
    -ms-flex: 1 1;
    flex: 1 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}
.viewAllWrap .viewContent .viewItem .viewInnerItem .rightDiv>div:first-child {
    font-size: 16px;
    color: #000;
    font-weight: 700;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    width: 100%;
}
.viewAllWrap .viewContent .viewItem .viewInnerItem .rightDiv>div {
    font-size: 14px;
}


.body-layout {
    background: no-repeat url(../../../../assets/images/rewards_bg.png);
    background-size: 100% 100%;
    height: 680px;
    display: -ms-flexbox;
    display: flex;
    padding: 18px 68px;
    -ms-flex-pack: center;
    justify-content: center;
}
.honor-layout {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-flow: column;
    flex-flow: column;
    width: 100%;
}
.honor-layout .honor-layout-cont {
    height: 200px;
    width: 100%;
    -ms-flex-align: center;
    align-items: center;
    background: no-repeat url(../../../../assets/images/rewards_bg_title.png);
    background-size: auto 100%;
    background-position: 50%;
}
.title-content {
    padding: 4px 60px;
    width: 100%;
    height: 100%;
    border-radius: 7px;
    background-color: #fff;
}
.title-head {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}
.item-image-div {
    display: inline-block;
    border-radius: 4px;
    width: 180px;
    height: 120px;
    border: 1px solid #f1f1f1;
    overflow: hidden;
}
.item-layout {
    display: block; 
    width: 25%; 
    padding-left: 12px; 
    padding-right: 12px;
    float: left;
}
.item-honor-name {
    display: block;
    margin-top: 9px;
    color: #000;
    font-size: 16px;
    text-align: center;
    font-family: PingFangSC-Regular;
}
.item-honor-group {
    display: block;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    text-align: center;
    font-family: PingFangSC-Regular;
}
.item-honor-time {
    display: block;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #1999;
    text-align: center;
    font-family: PingFangSC-Regular;
}
.honor-layout-select {
    display: flex;
    align-items: right;
    position: absolute;
    top: 19px;
    right: 65px;
    width: 19%;
}
.el-select .el-input__placeholder {
  color: #f00!important; /* 将颜色改为红色 */
}

.pagination-container {
    z-index: 1999!important;
    position: relative;
    top: -90px;
    right: 90px;
    background: transparent;
}

::v-deep .el-carousel__indicator .el-carousel__button {
  background-color: #ccc!important;
}

::v-deep .el-carousel__indicator.is-active .el-carousel__button {
  background-color: #f00!important;
}
</style>
